<include file="../Public/header.html" />
<link href="__PUBLIC__/Css/productList.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="/Public/Js/jquery-ui/jquery.ui.all.css" rel="stylesheet" />   
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.core.js"></script>  
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.mouse.js"></script> 
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.draggable.js"></script> 
<php>/**
*	调用图片生成工具thumb.php的封装方法．
**/
function _getSmsPhoto($photopath,$w,$h) {
	return "/thumb.php?w=".$w."&h=".$h."&url=http://".$_SERVER['HTTP_HOST'].$photopath;
}</php>
<!--页面主部-->
<div id="main"> 
	<include file="area_left_smsdemo" />
  <script type="text/javascript" >
  	jQuery(document).ready(function($) {
  			 $("#draggable").draggable({ containment: '#show_sms_bg' });
  		//alert(1);
  	/**
				$('#thumbs >  ul > li ').find(' ul > li').each(function(i){
																			$(this).bind("click",function(){
																					alert($(this).attr('src'));
																			});
																		});**/
							//.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							//.eq(nextIndex).fadeTo('fast', 1.0);
						
						$('#thumbs >  ul > li').each(function(i){
																			//$(this).click(function(){
																			//		alert(11);
																			//});
																			$(this).unbind("click").bind("click",function(){
																					//alert($(this).find('img').attr('rel'));
																					baseurl="<php>echo '/thumb.php?w=240&h=150&url=http://'.$_SERVER['HTTP_HOST'];</php>";
																					$('#sms_bg').attr('src',baseurl+$(this).find('img').attr('rel'));
																					$('#smsimg').val($(this).find('img').attr('rel'));
																					$('#thumbs >  ul > li').each(function(i){
																							$(this).removeClass('selected');
																							$(this).addClass('unselected');
																					});
																					$(this).removeClass('unselected');
																					$(this).addClass('selected');
																			});
																		});
						//alert($('#thumbs >  ul > li'));
						
		});
		function submitSms(){
				//alert(1);
				/** 获取文字坐标 **/
				_left = $('#draggable').css('left');
				_top = $('#draggable').css('top');
				//alert("left="+_left+"  _top="+_top);
				//<input type='hidden' name='smsimg'>
     		//<input type='hidden' name='smstext'>
     		//<input type='hidden' name='textxy'>
     		$('#textxy').val(_left+','+_top);
     		$('#smstext').val($('#inputtext').val());
     		alert($('#textxy').val() + " " + $('#smsimg').val() + " " + $('#smstext').val());
				$('#sendsms').submit();
		}
		function ReplaceNByString(targetString,replaceString) {
        return targetString.replace(/\r/g,replaceString);
    }
	</script>
  <!--页面主要内容-->
  <div id="right"> 
			<div style="float:left;width:240px;background-color: #FFFFFF;border: 1px solid #EAEAEA;padding:10px;">
					<div id='show_sms_bg' style="height:152px;width:240px;">
						<span class="image-wrapper current" style="opacity: 1;">
							<img id='sms_bg' style="height:152px;width:240px;" src="/demo/smsbg/N_004[1].jpg">
						</span>
						<span id="draggable" style="left: 0;position: relative;top: -150px;font-size:10pt;line-height: 20px;"></span>
    			</div>
    			<div>
						<img src="/demo/txm_demo.jpg" height="100" width="240px">
					</span>
    			</div>
			</div>
			
    	<div style="width : 432px;float:right;background-color: #FFFFFF;border: 1px solid #EAEAEA;padding:5px 0px;">
    			<div id='list_sms_thumbs'>
    				<div id="thumbs">
							<ul class="thumbs">
								<li class="selected">
										<img src="{:_getSmsPhoto('/demo/smsbg/N_004[1].jpg',190,120)}" rel='/demo/smsbg/N_004[1].jpg'>
								</li>
		
								<li class="unselected">
										<img src="{:_getSmsPhoto('/demo/smsbg/N_007[1].jpg',190,120)}" rel='/demo/smsbg/N_007[1].jpg'>
								</li>
		
								<li class="unselected">
										<img src="{:_getSmsPhoto('/demo/smsbg/N_009[1].jpg',190,120)}" rel='/demo/smsbg/N_009[1].jpg'>
								</li>
								
								<li class="unselected">
										<img src="{:_getSmsPhoto('/demo/smsbg/N_013[1].jpg',190,120)}" rel='/demo/smsbg/N_013[1].jpg'>
								</li>
								<li class="unselected">
										<img src="{:_getSmsPhoto('/demo/smsbg/C_010[1].jpg',190,120)}" rel='/demo/smsbg/C_010[1].jpg'>
								</li>
								
								<li class="unselected">
										<img src="{:_getSmsPhoto('/demo/smsbg/N_014[1].jpg',190,120)}" rel='/demo/smsbg/N_014[1].jpg'>
								</li>
							</ul>
						</div>
    			</div>
    	</div>
    	
    	<div style="float:left;background-color: #FFFFFF;text-align:center;width:262px">
				<ul style=" color: #666666;line-height: 30px; padding-bottom: 20px;">
		      <li style="text-align:left">录入文字</li>
		      <li>
		        <textarea rows="10" cols="20" id="inputtext" name="" class="sms_input" 
		        					style="overflow-y:hidden;overflow-x:hidden;BACKGROUND-IMAGE: url(/demo/smsbg/N_013[1].jpg);"
		        					onkeyup="	_val = $(this).val();
		        										_val=_val.replace(/\r\n/gi, '<br>');
		        										_val=_val.replace(/\n\r/gi, '<br>');
		        										_val=_val.replace(/\n/gi,'<br>');
		        										_val=_val.replace(/\r/gi,'<br>');
		        										_val=_val.replace(/\s/g,'&nbsp;');
		        										$('#draggable').html(_val);"	
		        >
		        </textarea>
		      </li>
		      <li style="text-align:left"><input type='button' value="预览" onclick="submitSms();"></li>
		    </ul>
     	</div>
			
    	<div class="clear"></div>
			
     	<form action="{:U('Index://Index/test1')}" method='post' id='sendsms' target="_blank">
     			<input type='hidden' name='smsimg' id='smsimg'>
     			<input type='hidden' name='smstext' id='smstext'>
     			<input type='hidden' name='textxy' id='textxy'>
     	</form>
		<style>
			ul.thumbs {
		    clear: both;
		    margin: 0;
		    padding: 0;
		}
		ul.thumbs li {
		    float: left;
		    list-style: none outside none;
		    margin: 5px 10px 5px 10px;
		    padding: 0;
		}
		.thumbs img{
				border: 1px solid #CCCCCC;
		    display: block;
		    padding: 2px;
	  }
	  ul.thumbs li.selected {
		    background: none repeat scroll 0 0 #999999;
		    opacity: 1;
		}
		ul.thumbs li.unselected {
		    background: none repeat scroll 0 0 #ffffff;
		    opacity: 1;
		}
		.sms_input {
		    border: 1px solid #7F9DB9;
		    color: #333333;
		    font-size: 10pt;
		    height: 40px;
		    /**line-height: 18px;**/
		    padding: 10px;
    		width: 240px;
    		
		}
		</style>
		
		
		
  </div>

</div>

<include file="../Public/footer.html" />